import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function VisitorMonitor({ data = {}, loading = false }) {
  const chartRef = useRef(null);

  useEffect(() => {
    if (!data || !data.list) return;
    const chart = echarts.init(chartRef.current);
    chart.setOption({
      grid: { left: 90, right: 40, top: 20, bottom: 20 },
      xAxis: {
        max: 100,
        show: false
      },
      yAxis: {
        type: 'category',
        data: data.list.map(item => item.name).reverse(),
        axisLabel: { color: '#fff', fontSize: 14, margin: 16 },
        axisTick: { show: false },
        axisLine: { show: false }
      },
      series: [
        {
          type: 'bar',
          data: data.list.map(item => item.value).reverse(),
          barWidth: 16,
          itemStyle: {
            color: (params) => {
              // 前两名紫色，后面橙色
              if (params.dataIndex === 3 || params.dataIndex === 4) return '#ffb300';
              return '#a020f0';
            },
            borderRadius: 8
          },
          label: {
            show: true,
            position: 'right',
            color: '#fff',
            fontSize: 14,
            formatter: '{c}%'
          },
          z: 2
        },
        {
          // 灰色背景条
          type: 'bar',
          data: data.list.map(() => 100).reverse(),
          barWidth: 16,
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderRadius: 8
          },
          barGap: '-100%',
          z: 1
        }
      ]
    });
    return () => chart.dispose();
  }, [data]);

  return (
    <div style={{ position: 'relative', height: 260, width: '100%' }}>
      {/* 顶部信息区 */}
      <div style={{ width: '100%', padding: '0 8px 0 0', marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ color: '#00eaff', fontSize: 18, fontWeight: 700 }}>访客情况监测（月度）</span>
          <span style={{ fontSize: 13, color: '#6cf', cursor: 'pointer' }}>更多 &gt;</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', marginTop: 8 }}>
          <span style={{ fontSize: 30, color: '#19f0ff', fontWeight: 900, lineHeight: 1 }}>{data.total || 0}</span>
          <span style={{ fontSize: 14, color: '#6cf', fontWeight: 700, marginLeft: 8, marginBottom: 4 }}>访客数量统计（人次）</span>
        </div>
      </div>
      {/* 柱状图区 */}
      <div style={{ width: '100%', height: 200, marginTop: 0 }}>
        <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
      </div>
    </div>
  );
} 